<!-- 帐号设置->修改登录密码 -->
<template>

  <el-row>
    <el-col :span="8"><div/></el-col>
    <el-col :span="8">
      <h5>修改登录密码</h5>
      <el-form
          ref="formRef"
          :model="dynamicValidateForm"
          label-width="120px"
          class="demo-dynamic"
          label-position="left"
          @submit.prevent="changePassword"
      >
        <div>
          <el-form-item
              prop="oldPassword"
              label="旧密码"
              for="oldPassword"
              :rules="[
        {
          required: true,
          message: '请输入旧密码',
          trigger: 'blur',
        },
        {
          type: 'email',
          message: '请输入正确的旧密码',
          trigger: ['blur', 'change'],
        },
      ]"
          >
            <el-input v-model="oldPassword" required />
            <div v-if="errors.oldPassword">{{ errors.oldPassword }}</div>
          </el-form-item>
        </div>

        <div>
          <el-form-item
              prop="newPassword"
              label="新密码"
              for="newPassword"
              :rules="[
        {
          required: true,
          message: '请输入新密码',
          trigger: 'blur',
        },
        {
          type: 'email',
          message: '请输入正确的新密码',
          trigger: ['blur', 'change'],
        },
      ]"
          >
            <el-input v-model="newPassword" required />
            <div v-if="errors.newPassword">{{ errors.newPassword }}</div>
            <span>限6至14位数字与字母的组合</span>
          </el-form-item>
        </div>

        <div>
          <el-form-item
              prop="confirmPassword"
              label="新密码"
              for="confirmPassword"
              :rules="[
        {
          required: true,
          message: '请确认输入新密码',
          trigger: 'blur',
        },
        {
          type: 'email',
          message: '请确认输入正确的新密码',
          trigger: ['blur', 'change'],
        },
      ]"
          >
            <el-input v-model="confirmPassword" required />
            <div v-if="errors.confirmPassword">{{ errors.confirmPassword }}</div>
          </el-form-item>
        </div>

        <el-button type="submit" @click="submit()">确认</el-button>
        <el-button @click="cancel">取消</el-button>

      </el-form>
    </el-col>
    <el-col :span="8"><div/></el-col>
  </el-row>





</template>

<script setup>
import { reactive, ref } from 'vue'

const oldPassword = ref("")
const newPassword = ref("")
const confirmPassword = ref("")
const errors = ref("")

const validatePassword=(password)=>{
  // 校验密码格式，返回 true 或 false
  return /^[a-zA-Z0-9]{6,14}$/.test(password);
}

const changePassword=()=>{
  this.errors = {}; // 清空之前的错误信息

  if (this.oldPassword === '') {
    this.errors.oldPassword = '请输入旧密码';
  }

  if (this.newPassword === '' || !this.validatePassword(this.newPassword)) {
    this.errors.newPassword = '请输入6-14位字母与数字组合密码';
  }

  if (this.confirmPassword !== this.newPassword) {
    this.errors.confirmPassword = '两次密码不一致！';
  }

  if (Object.keys(this.errors).length === 0) {
    // 执行密码修改逻辑，校验正确
    // 可以在这里发送密码修改请求
    // 如果修改成功，显示成功提示；如果发生未知错误，显示失败提示
  }
}

const cancel=()=>{
  // 取消操作，可以清空输入字段等
  this.oldPassword = '';
  this.newPassword = '';
  this.confirmPassword = '';
  this.errors = {};
}


</script>

<style scoped>
</style>